// axios
//渲染分类页面

async function render() {
  const res = await axios.get('http://cba.itlike.com/public/index.php?s=/api/category/list')
  console.log(res.data.data)
  document.querySelector('.left ul').innerHTML = res.data.data.list.map((ele,index)=> `<li data-id="${index}" class="">${ele.name}</li>`).join('')

  document.querySelector('.right ul').innerHTML = res.data.data.list[0].children.map(item => `
  <li class="cate-img-padding">
    <img name="${item.name}" class="cate-img-padding" src="${item.image.external_url}" alt="">
    <span>${item.name}</span>
  </li>
  `).join('')
  

  document.querySelectorAll('.left li')[0].classList.add('active')
 document.querySelector('.left').addEventListener('touchstart', function (e) {
  //  console.log(e.target.tagName)
 // 点击事件
 if (e.target.tagName === 'LI') {
    // console.log(e.target.dataset.id)
   // console.log(e.target)
   document.querySelector('.left li.active') && document.querySelector('.left li.active').classList.remove('active')
   e.target.classList.add('active')

  }
  // 右侧商品
  if (Boolean(document.querySelector('.left li.active'))) {
    if (Boolean(res.data.data.list[e.target.dataset.id].children)) {
      document.querySelector('.right ul').innerHTML = res.data.data.list[e.target.dataset.id].children
      .map(
        ele => `
        <li class="cate-img-padding">
        <img name="${ele.name}" class="cate-img-padding" src="${ele.image.external_url}" alt="">
        <span>${ele.name}</span>
      </li>
        `
        )
        .join('')
      } else {
        document.querySelector('.right ul').innerHTML=''
      }
    }
 })
// 点击商品类，跳转对应商品列表
document.querySelector('.right ul').addEventListener('click',function (e) {
  if (e.target.classList.contains('cate-img-padding')) {
    // console.log(e.target.nextElementSibling.innerHTML)
    // console.log(e.target.name)
    localStorage.setItem('goodsList',e.target.name)
  } else if (e.target.tagName === 'SPAN') {
    // console.log(e.target.innerHTML)
    localStorage.setItem('goodsList',e.target.innerHTML)
  }
  location.href = './goodslist.html'
})
}
render()

